<template>
	<div>

		<div class="head">
			购物车<small v-if="buller">({{buller.shopCar.length}})</small>
		</div>

		<main>
			<div v-if="!buller" class="noCun">
				<i class="fa fa-shopping-cart"></i>
				<p>亲，先去登录吧 O(∩_∩)O~~</p>
			</div>

			<div v-if="buller&&buller.shopCar.length==0" class="noLength">

				<i class="fa fa-shopping-cart"></i>
				<p>购物车好空呀！ 快去逛逛吧 (*≧▽≦*)</p>
			</div>
			<ul v-if="buller">
				<li v-for="(item,ins) in buller.shopCar" :key='ins'>
					<div class="left" @click="check($event,item._id,item.color[0],item.model[0])">
						<i v-if="!item.checkReady" class="fa fa-circle-o"></i>
						<i v-if="item.checkReady" class="fa fa-check-circle"></i>
					</div>
					<div class="right">
						<a :href="'#/good/info/' + item._id+'?bb=2'"><img :src="'http://localhost:2200'+item.avatar[0]" alt="" /></a>
						<div>

							<p>{{item.name}} <br /> {{item.describe}}</p>
							<p>¥{{item.price}}<span>{{item.color[0]}}；{{item.model[0]}}</span></p>
							<div class="foot1" style="width: 100%;">
								<a v-if="item.num<=1" class="minus minusTrue"><i class="fa fa-minus"></i></a>
								<a v-if="item.num>1" class="minus" @click="minus($event,item._id,item.color[0],item.model[0])"><i class="fa fa-minus"></i></a>
								<span>{{item.num}}</span>
								<a @click="plus($event,item._id,item.color[0],item.model[0])"><i class="fa fa-plus"></i></a>
								<b @click="remove($event,item._id,item.color[0],item.model[0])" class="fa fa-trash"></b>
							</div>

						</div>
					</div>
				</li>
				<div class="clear">

				</div>
			</ul>

			<div class="foot" v-if='buller'>
				<div v-if="!checkAll" class="left" @click="chooseAll($event,buller._id)">
					<i class="fa fa-circle-o"></i> 全选
				</div>
				<div v-if="checkAll" class="left" @click="noChooseAll($event,buller._id)">

					<i class="fa fa-check-circle"></i> 全选
				</div>
				<div class="right">
					<span>
						合计:  <span>¥ {{money}}</span>
					</span>
					<a href="#/buller/bullGoods">
						结算({{ checkNum }})
					</a>
				</div>
			</div>
			<div class="clear">

			</div>

		</main>

	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	export default {
		data: function() {
			return {
				buller: null,
				checkAll: false,
				money: 0,
				checkNum: 0
			}
		},

		mounted() {
			axios.get('/buller/checkLogin').then((result) => {

				this.buller = result.data.data;
				
					var all = true;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {
						if(this.buller.shopCar[i].checkReady == false) {
							all = false;
						}

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
					if(all) {
						this.checkAll = true;
					} else {
						this.checkAll = false;
					}

			}).catch((err) => {
				console.log(err);
			})
		},
		methods: {
			chooseAll: function(ev, id) {
				this.checkAll = !this.checkAll;
				axios.get('/buller/editCar?id=' + id + '&type=checkAll').then((result) => {
					this.buller = result.data.data;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}

				}).catch((err) => {
					console.log(err);
				})
			},
			noChooseAll: function(ev, id) {
				this.checkAll = !this.checkAll;
				axios.get('/buller/editCar?id=' + id + '&type=noCheckAll').then((result) => {
					this.buller = result.data.data;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
				}).catch((err) => {
					console.log(err);
				})
			},
			check(ev, id, color, model) {
				axios.get('/buller/editCar?id=' + id + '&type=check&color=' + color + '&model=' + model).then((result) => {
					this.buller = result.data.data;
					var all = true;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {
						if(this.buller.shopCar[i].checkReady == false) {
							all = false;
						}

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
					if(all) {
						this.checkAll = true;
					} else {
						this.checkAll = false;
					}

				}).catch((err) => {
					console.log(err);
				})
			},
			remove(ev, id, color, model) {
				axios.get('/buller/editCar?id=' + id + '&type=remove&color=' + color + '&model=' + model).then((result) => {

					this.buller = result.data.data;
					this.checkNum = 0;
					this.money = 0;
					
					if(this.buller.shopCar.length<=0){
						this.checkAll = false;
					}
					
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
				}).catch((err) => {
					console.log(err);
				})
			},
			plus(ev, id, color, model) {

				axios.get('/buller/editCar?id=' + id + '&type=plus&color=' + color + '&model=' + model).then((result) => {
					this.buller = result.data.data;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
				}).catch((err) => {
					console.log(err);
				})
			},
			minus(ev, id, color, model) {

				axios.get('/buller/editCar?id=' + id + '&type=minus&color=' + color + '&model=' + model).then((result) => {
					this.buller = result.data.data;
					this.checkNum = 0;
					this.money = 0;
					for(var i = 0; i < this.buller.shopCar.length; i++) {

						if(this.buller.shopCar[i].checkReady == true) {
							this.money += this.buller.shopCar[i].num * this.buller.shopCar[i].price;
							this.checkNum += 1;
						}

					}
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>
	.clear {
		clear: both;
	}
	
	.fa-check-circle {
		color: orangered;
	}
	
	.head {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		text-align: center;
		color: white;
		font-size: 15px;
		line-height: 35px;
		background: linear-gradient(to right, #FF7706 40%, #FF4400 90%);
	}
	
	main {
		padding: 35px 0px 95px 0px;
		font-size: 13px;
		height: 100vh;
	}
	
	main ul {
		background: #EEEEEE;
	}
	
	.foot {
		position: fixed;
		width: 100%;
		bottom: 47px;
		z-index: 200;
		left: 0;
		text-align: center;
		color: #777;
		border-top: solid 1px #ddd;
		line-height: 45px;
		font-size: 15px;
		background: white;
	}
	
	.foot i {
		font-size: 20px;
	}
	
	.foot .left {
		float: left;
		width: 20%;
	}
	
	.foot .right {
		float: right;
		width: 80%;
		text-align: right;
	}
	
	.foot .right a {
		display: inline-block;
		line-height: 45px;
		width: 30%;
		text-align: center;
		color: white;
		background: linear-gradient(to right, #ff8800 10%, #ff4600 90%);
	}
	
	.foot .right>span {
		font-size: 14px;
	}
	
	.foot .right span span {
		color: orangered;
	}
	
	.noCun {
		text-align: center;
		padding-top: 20px;
		color: #888888;
		font-size: 15px;
	}
	
	.noCun i {
		color: #DDDDDD;
		font-size: 60px;
	}
	
	.noLength {
		text-align: center;
		padding-top: 20px;
		color: #888888;
		font-size: 15px;
	}
	
	.noLength i {
		color: #DDDDDD;
		font-size: 60px;
	}
	
	ul li {
		background: #fcefe9;
		overflow: hidden;
		margin: 10px 0;
		padding: 5px 0;
	}
	
	ul li:first-child {
		margin-top: 0;
	}
	
	ul li .left {
		float: left;
		width: 10%;
		text-align: center;
		line-height: 110px;
		cursor: pointer;
	}
	
	ul li .left i {
		font-size: 20px;
		color: #777777;
	}
	
	ul li .left .fa-check-circle {
		color: orangered;
	}
	
	ul li .right {
		float: left;
		width: 90%;
	}
	
	ul li .right img {
		width: 100px;
		height: 100px;
		float: left;
	}
	
	ul li .right>div {
		float: left;
		padding-left: 10px;
		width: 65%;
	}
	
	ul li .right>div p {
		line-height: 20px;
		height: 40px;
		overflow: hidden;
	}
	
	ul li .right div p:nth-child(2) {
		color: red;
		font-size: 14px;
	}
	
	ul li .right div p:nth-child(2) span {
		float: right;
		font-size: 13px;
		color: #777777;
	}
	
	.foot1 {
		overflow: hidden;
	}
	
	.foot1>b {
		float: right;
		font-size: 18px;
		line-height: 28px;
		color: #999;
		cursor: pointer;
	}
	
	.foot1 a {
		display: inline-block;
		width: 40px;
		line-height: 27px;
		text-align: center;
		border-radius: 9%;
		color: #888888;
		background: #ddd;
		cursor: pointer;
	}
	
	main .foot1 a.minusTrue {
		background: #EEEEEE;
	}
	
	.foot1 span {
		display: inline-block;
		text-align: center;
		width: 40px;
	}
	
	.foot1 b {
		font-style: normal;
	}
</style>